import { PcSeriveProvider } from "./../../../providers/pc-serive/pc-serive";
import { Component, ViewChild, Renderer2 } from "@angular/core";
import {
  IonicPage,
  NavController,
  NavParams,
  Slides,
  ToastController,
  LoadingController
} from "ionic-angular";
import { BaseUI } from "../../../common/baseUI";


/**
 * Generated class for the PcTeamReportPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: "page-pc-team-report",
  templateUrl: "pc-team-report.html"
})
export class PcTeamReportPage extends BaseUI {
  //轮播图
  @ViewChild(Slides) slides: Slides;
  @ViewChild("teamReport") teamReport;
  evalcode; //评测id
  evalpj = [{ name: "总分", value: null }]; //获取评测项目有多少个
  showlist = []; //要显示的数据
  data = { type: 0, evaluatingCode: null }; //传给后端的数据
  teamTabsDatas = []; //顶部列表集合

  scrollLeft = 0; //tabs 滚动的距离
  activeIndex = 0; //当前tabs
  scrollTime; //滚动定时器
  goodshow = [];

  @ViewChild("underLine") underLine;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private pcSerive: PcSeriveProvider,
    private toastCtrl: ToastController,
    private render: Renderer2,
    public loadingCtrl: LoadingController,
  ) {
    super();
    this.data.evaluatingCode = this.navParams.get("evalcode"); //获取团队编号
    this.goodshow = this.navParams.get('evalDatas');
  }

  ionViewDidLoad() {

    //初始化下划线
    this.render.setStyle(
      this.underLine.nativeElement,
      "width",
      this.teamReport.nativeElement.children[0].clientWidth + "px"
    );
    this.render.setStyle(
      this.underLine.nativeElement,
      "left",
      this.teamReport.nativeElement.children[0].offsetLeft + "px"
    );
    const loading = this.showLoading(this.loadingCtrl, "加载中");
    setTimeout(() => {
      //请求数据
      this.pcSerive.getTeamRp(this.data).subscribe(data => {
        if (!data["evaluatingDescList"]) {
          this.showToast(this.toastCtrl, "获取列表失败");
        } else {
          let list = JSON.parse(data["evaluates"]); //获取当前项目列表
          //把单项插入数据中
          for (let i = 0; i < list.length; i++) {
            this.evalpj.push(list[i]);
          }
          //算总分
          let userdata = [];
          for (let index = 0; index < data['evaluatingDescList'].length; index++) {
            let user = {};
            user['usercode'] = data['evaluatingDescList'][index]['usercode'];
            user['realname'] = data['evaluatingDescList'][index]['realname'];
            user['avatar'] = data['evaluatingDescList'][index]['avatar'];
            let valdata = JSON.parse(data['evaluatingDescList'][index]['evaluatingallthescores']);
            let val = 0;
            for (const list of valdata) {
              val = val + list['value'];
            }
            user['uservalue'] = val;
            userdata[index] = user;
          }
          this.evalpj[0]['userlist'] = userdata;
          //算每个的单项的分数
          for (let index = 1; index < this.evalpj.length; index++) {
            this.data.type = index;
            this.pcSerive.getTeamRp(this.data).subscribe(data => {
              let userdata = [];
              for (let id = 0; id < data['evaluatingDescList'].length; id++) {
                let user = {};
                user['usercode'] = data['evaluatingDescList'][id]['usercode'];
                user['realname'] = data['evaluatingDescList'][id]['realname'];
                user['avatar'] = data['evaluatingDescList'][id]['avatar'];
                let userval = JSON.parse(data['evaluatingDescList'][id]['evaluatingallthescores']);
                user['uservalue'] = userval[index - 1]['value'];;
                userdata[id] = user;
              }
              this.evalpj[index]['userlist'] = userdata;
            });
          }
          loading.dismiss();
        }
      });
    }, 300);
  }


  //tabs的滚动
  // scroll(childNodes, nativeElement) {
  //   //下划线触发动画
  //   this.render.setStyle(
  //     this.underLine.nativeElement,
  //     "width",
  //     this.teamReport.nativeElement.children[this.data["type"]].clientWidth +
  //       "px"
  //   ); 
  //   this.render.setStyle(
  //     this.underLine.nativeElement,
  //     "left",
  //     this.teamReport.nativeElement.children[this.data["type"]].offsetLeft +
  //       "px"
  //   );
    
  // }

    //tabs的滚动
    scroll(childNodes, nativeElement) {
      this.clearScrollTime();
  
      //下划线触发动画
      this.render.setStyle(
        this.underLine.nativeElement,
        "width",
        this.teamReport.nativeElement.children[this.data["type"]].clientWidth +
          "px"
      ); 
      this.render.setStyle(
        this.underLine.nativeElement,
        "left",
        this.teamReport.nativeElement.children[this.data["type"]].offsetLeft +
          "px"
      );
  
      //预设值为0
      this.scrollLeft = 0;
      //计算需要滚动的值
      for (let i = 0; i < this.data["type"]; i++) {
        this.scrollLeft += childNodes[i].clientWidth;
      }
      
      //获取当前滚动的值
      let l = this.teamReport.nativeElement.scrollLeft;
  
      this.scrollTime = setInterval(() => {
        //如果是往后切换
        if (this.scrollLeft <= l && this.activeIndex < this.data["type"]) {
          this.clearScrollTime();
          this.activeIndex = this.data["type"];
          return;
        }
        // 如果是往前切换 当到达
        if (this.scrollLeft >= l && this.activeIndex > this.data["type"]) {
          this.clearScrollTime();
          this.activeIndex = this.data["type"];
          return;
        }
        if (this.activeIndex < this.data["type"]) { 
          //如果是往后，增加滚动值
          l += 1;
        } else {
          //如果是往前，减少滚动值
          l -= 1; 
        }
        this.teamReport.nativeElement.scrollLeft = l;
      }, 1);
    }
    //清除滚动定时器 防止在定时器进行时用户滑动出BUG 需要加在Ul的滑动事件上(未加)
    clearScrollTime() {
      clearInterval(this.scrollTime);
    }
  
  //topbar点击切换事件
  next(id) {
    this.slides.slideTo(id, 500);
  }

  //改变topbar样式和更改数据
  changeSelect() {
    //获得当前选中index
    this.data.type = this.slides.getActiveIndex();
    if (this.data["type"] > this.slides.length() - 1) {
      this.data["type"] = this.slides.length() - 1;
    }
    this.scroll(
      this.teamReport.nativeElement.children,
      this.teamReport.nativeElement
    );

  }

  //跳转优秀成员
  openMyRp(id) {
    this.navCtrl.push('PcMyreportPage', {
      userid: id,  //传userid
      evalcode: this.data.evaluatingCode, //传评测编号 
      evalDatas: this.goodshow
    })
  }
}
